.no-linked-spans {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400px;
}

.linked-spans-container {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px;

	.item {
		display: flex;
		flex-direction: column;
		gap: 8px;
		justify-content: flex-start;

		.item-key {
			color: var(--bg-vanilla-100);
			font-family: Inter;
			font-size: 14px;
			font-style: normal;
			font-weight: 400;
			line-height: 20px; /* 142.857% */
			letter-spacing: -0.07px;
		}

		.value-wrapper {
			display: flex;
			padding: 2px 8px;
			align-items: center;
			width: fit-content;
			max-width: 100%;
			gap: 8px;
			border-radius: 50px;
			border: 1px solid var(--bg-slate-400);
			background: var(--bg-slate-500);

			.item-value {
				color: var(--bg-vanilla-400);
				font-family: Inter;
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 20px; /* 142.857% */
				letter-spacing: 0.56px;
			}
		}
	}
}

.lightMode {
	.linked-spans-container {
		.item {
			.item-key {
				color: var(--bg-ink-100);
			}

			.value-wrapper {
				border: 1px solid var(--bg-vanilla-300);
				background: var(--bg-vanilla-300);

				.item-value {
					color: var(--bg-ink-400);
				}
			}
		}
	}
}
